<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>城市选择的三种实现</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <fieldset>
            <legend>方法一：下拉选择框实现省市区（县）三级联动</legend>
            <form action="#">
                <label for="addr-show">您选择的是：
                    <input type="text" value="" id="addr-show">
                </label>
                <br />

                <!--省份选择-->
                <select id="prov" onchange="showCity(this)">
                    <option value="">=请选择省份=</option>
                </select>

                <!--城市选择-->
                <select id="city" onchange="showCountry(this)">
                    <option value="">=请选择城市=</option>
                </select>

                <!--县区选择-->
                <select id="country" onchange="selecCountry(this)">
                    <option value="">=请选择县区=</option>
                </select>
                <button type="button" class="btn met1" onClick="showAddr()">确定</button>
            </form>
        </fieldset>

        <fieldset>
            <legend>下拉选择框实现省市区（县）三级联动以及获得地区行政编码</legend>
            <form action="#">
                <label for="addr-show-number">您选择的是：
                    <input type="text" value="" id="addr-show-number">
                </label>
                <br />

                <!--省份选择-->
                <select id="prov-number" onchange="showCity04(this)">
                    <option value="">=请选择省份=</option>
                </select>

                <!--城市选择-->
                <select id="city-number" onchange="showCountry04(this)">
                    <option value="">=请选择城市=</option>
                </select>

                <!--县区选择-->
                <select id="country-number" onchange="selecCountry04(this)">
                    <option value="">=请选择县区=</option>
                </select>
                <button type="button" class="btn met04" onClick="showAddr04()">确定</button>
            </form>
        </fieldset>
    </div>
    <!--**********************************华丽丽*************************************-->

    <div>
        <fieldset>
            <legend>方法二：按级选中省市县/区</legend>
            <label for="addr-show02">您选择的是：
                <input type="text" id="addr-show02">
            </label>
            <div id="addr-choice">
                <ul id="title-wrap">
                    <li value="0">省份</li>
                    <li value="1">城市</li>
                    <li value="2">县区</li>
                </ul>
                <div id="show-panel">
                    <ul id="addr-wrap">
                    </ul>
                </div>
            </div>
            <button type="button" class="btn met2">确定</button>
        </fieldset>
    </div>
    <!--**********************************华丽丽*************************************-->
    <div>
        <fieldset>
            <legend>方法三：按字母顺序选中城市</legend>
            <label for="addr-show03">您选择的是：
                <input type="text" id="addr-show03">
            </label>
            <div id="data-wrap">
                <ul id="data-order">
                    <li value='0'>热门</li>
                    <li value='1'>ABCD</li>
                    <li value='2'>EFGH</li>
                    <li value='3'>JKLM</li>
                    <li value='4'>NPQR</li>
                    <li value='5'>STWX</li>
                    <li value='6'>YZ</li>
                </ul>
                <div id="data-show"></div>
            </div>
        </fieldset>
    </div>

    <script src="city.js"></script>
    <script src="city02.js"></script>
    <script src="city03.js"></script>
    <script src="method01.js"></script>
    <script src="method02.js"></script>
    <script src="method03.js"></script>
    <script src="method04.js"></script>
</body>

</html>